<template>
  <div class="dashboard-editor-container ">
    <div class="clearfix">
      <pan-thumb :image="avatar" style="float: left">
        Your roles:
        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
      </pan-thumb>
      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
      <div class="info-container">
        <span class="display_name">{{ name }}</span>
      </div>
    </div>
    <div>
      <div v-if="isAdmin === 0" style="width: 100vw; height: 100vh; overflow: hidden;;">
        <h1>您好！欢迎使用企业内部管理系统</h1>
        <!-- //<img src="../admin/person.png" style="width: 100%; height: 100%; background-size: cover;"> -->
      </div>
      <!-- <img :src="emptyGif" class="emptyGif"> -->
      <div class="card top" v-if="isAdmin === 1">
        <el-steps direction="vertical" :active="3" finish-status="success" style="height: 300px; margin: 10px;">
          <div style="padding: 12px;font-weight:900;font-size: 30px;border-color: azure;">公告列表</div>
          <el-step title="今天系统正式上线，开始内测" description="2024-2-10"></el-step>
          <el-step title="所有功能都已完成，可以正常使用" description="2024-2-30"></el-step>
          <el-step title="今天天气很不错，可以出去一起玩了" description="2024-3-20"></el-step>
        </el-steps>
      </div>
      <div class="card top" v-if="isAdmin === 1">
        <div ref="pieChart" style="width: 600px; height: 400px;"></div>
        <div ref="barChart" style="width: 600px; height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import propertyApi from "@/api/notice";
import GithubCorner from '@/components/GithubCorner';
import PanThumb from '@/components/PanThumb';
import echarts from 'echarts';
import { mapGetters } from 'vuex';

let intervalTimer = null
export default {
  name: 'DashboardAdmin',
  components: { PanThumb, GithubCorner },
  data() {
    return {
      departments: ['销售部', '后勤部', '财务部', '技术部', '产品部'],
      expenditures: [20000, 15000, 18000, 25000, 22000],
      salaries: [18000, 16000, 20000, 24000, 21000],
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'isAdmin'
    ])
  },
  methods: {
    //legendData图例数据
    renderPieChart(datas, legendDatas) {
      const pieChart = echarts.init(this.$refs.pieChart);
      const option = {
        title: {
          text: '财务支出饼图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: legendDatas
          // data: this.departments
        },
        series: [
          {
            name: '支出金额',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: datas,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(option);
    },
    renderBarChart(x, y) {
      const barChart = echarts.init(this.$refs.barChart);
      const option = {
        title: {
          text: '部门薪资柱状图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: x,
          rotate: 45, // 文字倾斜s
        },
        yAxis: {
          type: 'value',
          name: '薪资 (元)'
        },
        series: [
          {
            data: y,
            type: 'bar',
            itemStyle: {
              color: '#409EFF',// 水绿色
              shadowColor: '#91cc75',
              borderType: 'dashed',

            }
          }
        ]
      };
      barChart.setOption(option);
    },

    //支出饼图   
    async SalaryChart() {
      /*await等待异步操作ApI调用的结果，将结果存储res中
        propertyApi.Financialproperty({})返回Promise的对象，
        代表API的异步请求
      */
      let res = await propertyApi.Financialproperty({});
      //判断是否成功
      if (res.success) {
        //渲染数据
        const newDataArray = [];
        var legendDatas = [];
        var list = res.data;
        //使用 forEach 方法遍历 list（即 `res.data`）
        list.forEach(item => {
          const newItem = {
            name: item.deptName,
            value: item.quantity
          };
          //将部门名称添加到 legendDatas数组
          legendDatas.push(item.deptName);
          // 将newItem 添加到newDataArray数组
          newDataArray.push(newItem);
        });
        //渲染饼图
        this.renderPieChart(newDataArray, legendDatas);
      } else {
        //失败提示
        this.$message.error(res.message);
      }
    },
    /**
     * 部门薪资
     * @param row
     */
    async chartProperty() {
      //查询该部门是否被使用
      let res = await propertyApi.SalaryChart({});
      //判断是否成功
      if (res.success) {
        const newDataArray = [];
        var list = res.data
        var x = []
        var y = []
        list.forEach(element => {
          x.push(element.deptName);
          y.push(element.salary);
        });
        console.log(x, y)
        this.renderBarChart(x, y);
      } else {
        //失败提示
        this.$message.error(res.message);
      }

    }
  },
  mounted() {
    if (this.isAdmin === 1) {
      this.chartProperty();
      this.SalaryChart();
      if (intervalTimer != null) {
        // 清除setInterval
        clearInterval(intervalTimer)
      }
      intervalTimer = setInterval(() => {
        this.chartProperty();
        this.SalaryChart();
        console.log('intervalTimer')
      }, 30000)

    }

  },
  destroyed() {
    if (intervalTimer != null) {
      // 清除setInterval
      clearInterval(intervalTimer)
    }
  },
  beforeDestroy() {
    if (intervalTimer != null) {
      // 清除setInterval
      clearInterval(intervalTimer)
    }
  }
}

</script>

<style lang="scss" scoped>
.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.top {
  // background: lightgray;s
  border: 1px solid lightgray;
  border-radius: 10px;
  background: white;
}

.dashboard-editor-container {
  background-color: white;
  min-height: 100vh;
  padding: 50px 60px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .card {
    display: flex;
    width: calc(100% - 20px);
    margin: 10px auto;
    background: #ffffff;
    border-radius: 10px;
  }

  .info-container {
    position: relative;
    margin-left: 180px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
